<template>
    <div class="pages" v-if="centerInfo">
        <div class="integral">
            <img src="../../assets/img/icon61.png" alt="" />
            <span>{{ centerInfo.appScore }}</span>
        </div>
        <div class="cont">
            <div class="mation">
                <div class="info">
                    <div class="tx">
                        <img :src="centerInfo.avatar ? centerInfo.avatar : require('../../assets/img/tx.png')" class="icon" alt="" />
                        <!-- isAuth 0未认证 1已认证 2已过期 -->
                        <!-- <img src="../../assets/img/icon19.png" class="edit" alt="" v-if="centerInfo.isAuth == 1" @click="pageJump('/usercard')" /> -->
                    </div>
                    <div class="name">{{ centerInfo.name ? centerInfo.name : centerInfo.nickname }}</div>
                </div>
                <div class="btn mc" @click="pageJump('/useredit')">编辑资料</div>
                <div class="btn" @click="changeUser(centerInfo.id)">切换账号</div>
                <div style="clear: both"></div>
            </div>
            <ul>
                <li v-for="(item, index) in numlist" :key="index" @click="pageJumpTo(item.url, index, item.title)">
                    <b>{{ item.num }}</b>
                    <span>{{ item.name }}</span>
                </li>
            </ul>
            <div class="menus">
                <div class="mone" v-for="(item, index) in getMenulist" :key="index" @click="pageJump(item.url, index)">
                    <img :src="item.icon" class="icon" alt="" />
                    <p>{{ item.name }}</p>
                    <img src="../../assets/img/icon62.png" class="jt" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { center } from "@/https/api";
export default {
    name: "",
    data() {
        return {
            centerInfo: "", // 个人信息
            numlist: [
                { name: "评论数", num: 45, title: "评论数", url: "usernums" },
                { name: "收藏数", num: 23, title: "收藏数", url: "usernums" },
                { name: "点赞数", num: 457, title: "点赞数", url: "usernums" },
                { name: "分享数", num: 15, title: "分享数", url: "usernums" },
            ],
            menulist: [
                { name: "我的稿件", icon: require("@/assets/img/icon25.png"), url: "/mydraft", show: true },
                { name: "我的活动", icon: require("@/assets/img/icon23.png"), url: "/myactivity", show: true },
                { name: "我的收藏", icon: require("@/assets/img/icon24.png"), url: "/mycollect", show: true },
                // { name: "小记者证书", icon: require("@/assets/img/icon26.png"), url: "/usercard", show: true },
                // { name: "认证续费", icon: require("@/assets/img/icon22.png"), url: "/centerpay", show: false },
                { name: "家人共享", icon: require("@/assets/img/shared.png"), url: "/shared", show: true },
                { name: "帮助中心", icon: require("@/assets/img/icon21.png"), url: "/help", show: true },
            ],
        };
    },
    created() {},
    computed: {
        getMenulist() {
            return this.menulist.filter((v) => {
                return v.show;
            });
        },
    },
    mounted() {
        this.statisticsMInfo();
    },
    methods: {
        // 个人信息
        async statisticsMInfo() {
            const res = await center.statisticsMInfo();
            if (res.code == 1) {
                this.centerInfo = res.data;
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                this.numlist[0].num = res.data.commentCount;
                this.numlist[1].num = res.data.collectionCount;
                this.numlist[2].num = res.data.praiseCount;
                this.numlist[3].num = res.data.forwardCount;
                // this.menulist[4].name = res.data.isAuth ? "认证续费" : "去认证";
                // let url = "/checkgo";
                // this.menulist[4].url = url;
                // if (res.data.isAuth >= 1) {
                //     this.getCostInfo();
                // } else {
                //     this.menulist[4].show = true;
                // }
            }
        },
        async getCostInfo() {
            const res = await center.getCostInfo({
                type: 0,
            });
            if (res.code == 1) {
                if (res.data.canRenew == 1 && (this.centerInfo.renewState == 0 || this.centerInfo.renewState == 3)) {
                    this.menulist[4].show = true;
                }
            }
        },
        //切换账号
        changeUser(id) {
            this.$router.push({ name: "userswitch", params: { id } });
        },
        pageJump(url, i) {
            if (i && i > 3) {
                if (i == 4) {
                    if (this.centerInfo.state == 1 && this.centerInfo.isPay == 1) {
                        this.$AuthDialog({
                            data: {
                                title: "认证提示",
                                content: `您的手机号${this.centerInfo.phone}已完成认证，请等待后台工作人员审核通过。`,
                                btnName: "确定",
                                path: "/checkgo",
                            },
                            listener: (res) => {},
                        });
                        return false;
                    }
                }
                this.$router.push({ path: url });
                return false;
            }
            if (url == "/useredit") {
                this.$router.push({ path: url });
                return false;
            }
						if(i != 1 && i!= 2){
							if (!this.isAuth()) {
							    return false;
							}
						}
            
            this.$router.push({ path: url });
        },
        pageJumpTo(url, flag, title) {
            if (!this.isAuth()) {
                return false;
            }
					  this.$router.push({ name: url, query: { option: flag, title: title } });
        },
        isAuth() {
            if (this.centerInfo.state == 1 && this.centerInfo.isPay == 1) {
                this.$AuthDialog({
                    data: {
                        title: "认证提示",
                        content: `您的手机号${this.centerInfo.phone}已完成认证，请等待后台工作人员审核通过。`,
                        btnName: "确定",
                        path: "/checkgo",
                    },
                    listener: (res) => {},
                });
                return false;
            }
            if (this.centerInfo.isAuth == 0) {
                this.$AuthDialog({
                    data: {
                        title: "认证提示",
                        content: `您的手机号${this.centerInfo.phone}请先完成用户认证。`,
                        btnName: "去认证",
                        path: "/checkgo",
                    },
                    listener: (res) => {
                        if (res.type == "btn") {
                            // if (this.centerInfo.clazzId && this.centerInfo.schoolId) {
                            //     this.$router.push("/payfor");
                            // } else {
                                this.$router.push("/checkgo");
                            // }
                        }
                    },
                });
                return false;
            }
            if (this.centerInfo.isAuth == 2) {
                this.$AuthDialog({
                    data: {
                        title: "认证提示",
                        content: `您的手机号${this.centerInfo.phone}认证会员已经到期，请重新完成认证后再使用。`,
                        btnName: "去认证",
                        path: "/payfor",
                    },
                    listener: (res) => {
                        if (res.type == "btn") {
                            this.$router.push("/checkgo");
                        }
                    },
                });
                return false;
            }
            return true;
        },
    },
};
</script>
<style scoped>
body {
    background-color: #fff;
}
.menus {
}
.mone {
    border-bottom: 0.02rem solid #dbdbdb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.14rem;
}
.mone .icon {
    display: block;
    width: 0.4rem;
    margin-right: 0.4rem;
}
.mone .jt {
    display: block;
    width: 0.11rem;
    margin-left: 0.4rem;
}
.mone p {
    flex: 1;
    font-size: 0.28rem;
    color: #333;
}

.pages {
    background-image: url(../../assets/img/icon11.png);
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;
    padding-bottom: 2rem;
}

.integral {
    padding: 0.6rem 0.3rem 0;
    line-height: 0.68rem;
    font-size: 0.4rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.integral img {
    display: block;
    width: 0.18rem;
    margin-right: 0.2rem;
}
.integral span {
    font-weight: bold;
}
.cont {
    background-color: #fff;
    padding: 0.3rem;
    border-radius: 0.2rem 0.2rem 0 0;
}
.mation {
    position: relative;
    height: 1.2rem;
}
.mation .info {
    position: absolute;
    top: -0.8rem;
    float: left;
}
.mation .tx {
    position: relative;
    margin-bottom: 0.16rem;
}
.mation .tx .icon {
    display: block;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
    overflow: hidden;
}
.mation .tx .edit {
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: 0.44rem;
    height: 0.44rem;
}
.mation .name {
    font-size: 0.3rem;
    color: #333;
    line-height: 0.4rem;
    font-weight: bold;
    text-align: center;
}
.mation .btn {
    float: right;
    margin-left: 0.4rem;
    height: 0.52rem;
    line-height: 0.48rem;
    padding: 0 0.22rem;
    font-size: 0.24rem;
    color: #ef6d29;
    border: 0.02rem solid #ef6d29;
    border-radius: 0.1rem;
}
.mation .btn.mc {
    color: #fff;
    background-color: #ef6d29;
}
ul {
    overflow: hidden;
    margin: 0.2rem 0 0.2rem;
    background-color: #fff8f3;
    padding: 0.35rem 0;
    width: 100%;
    border-radius: 0.1rem;
}
ul li {
    text-align: center;
    width: 25%;
    float: left;
}
ul li b {
    display: block;
    font-size: 0.4rem;
    color: #333;
    line-height: 0.44rem;
}
ul li span {
    display: block;
    font-size: 0.22rem;
    color: #999;
    line-height: 0.36rem;
    margin-top: 0.14rem;
}
</style>
